<template>
	<view class="market-order-packbox">
		<view class="header">
			<slot></slot>
		</view>
		<view class="" style="flex: 1; overflow: auto">
			<view class="goods-info relative" v-for="(item, index) of cardList" :key="index">
				<image
					v-if="commonConfigs && commonConfigs.domainFrontFileLink"
					:src="`${commonConfigs.domainFrontFileLink}/files/images/common/box-list-item-bg.png`"
					class="bg" mode=""></image>
					
				<view class="flex relative goods-info-content flex-justify-content-between">
					
					<view class="item-cover-box flex-all-center relative">
						<image class="bg"
							:src="commonConfigs.domainFrontFileLink + '/files/images/welfareHouse/goods-bg.png'"
							mode=""></image>
						<image :src="item.image" class="item-cover" mode="aspectFill"></image>
					</view>
					
					<view class="flex flex-direction-column item-content flex-justify-content-evenly truncate">
						<view class="card-name truncate">{{ item.name }}</view>
						<view class="card-price" v-if="item.price && bagOperType !== 'baobox'">价值：￥{{ item.price }}</view>
						<!-- <view class="" v-if="item.desc" style="padding-top: 30rpx">{{ item.desc }}</view> -->
						<view class="flex flex-justify-content-between flex-align-items-center">
							<view class="num">总数：{{ item.num }}</view>
							<view class="flex text-center input-bottom">
								<view class="oper-btn-num relative" @click="lessenNum(item, index)">
									<image class="bg"
										src="/static/images/public_imgs/reduce-icon-img.png"
										mode=""></image>
								</view>
								
								<input v-model="item.varNum" type="number" value="" class="input-num" @blur="inputBlur(item, index)" />
								
								<view class="oper-btn-num relative" @click="addNum(item, index)">
									<image class="bg"
										src="/static/images/public_imgs/add-icon-img.png"
										mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<image class="absolute del-bg-ico" src="/static/images/public_imgs/del-bg-ico.png" v-if="item.showDel" mode="" @click="delOrderItem(item)"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store';

	import { ACTIONS } from '@/store/modules/userStore';

	import { setAsyncFunWait } from '@/setupproject/TOOLS_FUN';

	export default {
		name: 'comMarketOrder',
		props: {
			
			bagOperType: String,
			title: String,
			show: Boolean,
			list: Array,
			
		},
		watch: {
			
			list: {
				handler(list) {
					this.cardList = list;
				},
				deep: true,
				immediate: true
			},
			cardList: {
				handler(list) {},
				deep: true,
				immediate: true
			},
			show(v) {
				if (v) {
					store.dispatch(ACTIONS.USER_INFO_GET_FUN);
					this.cardList = this.list;
				}
			},
			
		},
		data() {
			return {
				cardList: []
			};
		},
		computed: {
			
			allNum() {
				const arr = this.cardList.map((item) => parseInt(item.varNum));
				let value = 0;
				for (let v of arr) {
					value += v;
				}
			 
				// this.$emit('change');
				return value;
			},
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			allPrice() {
				const arr = this.cardList.map((item) => parseFloat(item.price) * parseInt(item.varNum));
				let value = 0;
				for (let v of arr) {
					value += v;
				}
				this.$emit('change');
				return parseFloat(value.toFixed(2));
			},
			
		},
		created() {},
		methods: {
			delOrderItem(item) {
				this.$emit('del', item);
			},
			
			async inputBlur(item, index) {
				item.varNum = parseInt(item.varNum);
				// console.log(item);
			
				if (item.varNum > item.num) {
					await setAsyncFunWait(100);
			
					item.varNum = item.num;
					await setAsyncFunWait(1000);
			
					uni.showToast({
						title: `数量已超出范围`,
						icon: 'none'
					});
				}
				if (!item.varNum) {
					await setAsyncFunWait(100);
					item.varNum = 1;
					await setAsyncFunWait(1000);
			
					uni.showToast({
						title: `数量不少于1`,
						icon: 'none'
					});
				}
			},
			
			addNum(item, index) {
				if (item.varNum === item.num) {
					return uni.showToast({
						title: '不能再多啦',
						icon: 'none'
					});
				}
				item.varNum++;
			},
			
			
			lessenNum(item, index) {
				if (item.varNum === 1) {
					return uni.showToast({
						title: '不能少于1个哦',
						icon: 'none'
					});
				}
				item.varNum--;
			},
		}
	};
</script>

<style scoped lang="scss">
	.market-order-packbox {
		color: #000000;
		font-size: 26rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;
		.content {
			flex: 1;
			overflow: auto;
		}
	}

	.goods-info {
		width: 100%;
		padding: 30rpx;
		background-size: 100% 100%;
		color: #666666;
		margin-bottom: 25rpx;
		flex: 1;
		.goods-info-content {
			line-height: 1;
		}
		
		.item-cover-box {
			width: 138rpx;
			height: 138rpx;
			overflow: hidden;
			margin-right: 30rpx;
		}
		
		.item-cover {
			width: 96rpx;
			height: 96rpx;
		}
		.item-content {
			font-size: 24rpx;
			font-weight: 500;
			color: #111111;
			flex: 1;
			.card-name {
				font-weight: 500;

				color: #111111;
				font-size: 32rpx;
				margin-bottom: 15rpx;
			}
			.card-price {
				margin-bottom: 5rpx;
			}
			.input-bottom {
				right: 20rpx;
				bottom: 20rpx;
				line-height: 35rpx;
				background: #80B3F1;
				border-radius: 18rpx;
				
				.oper-btn-num {
					width: 36rpx;
					height: 36rpx;
				}

				.input-num {
					width: 3em;
					height: 35rpx;
					min-height: 35rpx;
					line-height: 1;
				}
			}
		}
		.del-bg-ico {
			width: 26rpx;
			height: 25rpx;
			top: 10rpx;
			right: 0;
		}
	}

	.line {
		border-bottom: 1px solid #000;
	}

	.footer {
		padding: 30rpx;
		/* height: 200rpx; */
		background-color: #ffffff;
		width: 100%;
		bottom: 0;
		left: 0;
		position: sticky;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
	}

	.footer input {
		border-bottom: 1px solid #ccc;
		text-align: right;
		font-size: 24rpx;
		padding: 5rpx 10rpx;
	}

	.submit-btn {
		padding: 0;
		margin: 0;
		background-color: #ff5123;
		height: 74rpx;
		line-height: 74rpx;
		border-radius: 74rpx;
		font-size: 26rpx;
		color: #fff;
		padding: 0 30rpx;
		margin: 40rpx auto;
	}

	.submit-btn::after {
		content: '';
		display: none;
	}
</style>
